<template>
	<view>
		<cu-custom id="nav" :isBack="true" :bgColor="'bg-black'" :backColor="'text-white'">
			<block slot="backText"><view class="text-white ">商家拼车</view></block>
		</cu-custom>

		<view class="cu-list menu">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-btn text-green"></text>
					<text class="text-grey">选择剧本</text>
				</view>
				<view class="action">
					<button class="cu-btn round bg-green shadow" @click="$goPage('../ScriptManagement/ScriptManagement1')">
						<text class="cuIcon-upload"></text>
						去选择
					</button>
				</view>
			</view>
		</view>
		
		<view class="grarg">
			<view class="cu-card" v-if="scriptInfo">
				<view class="cu-item shadow padding-sm" style="background-color: #fff;position: relative;">
					<view class="flex justify-start">
						<image :src="$isHttp(scriptInfo.picture)" style="width: 148rpx;height: 210rpx;border-radius: 10rpx;" mode="aspectFill"></image>
						<view class=" margin-left-sm" style="width: 520rpx;">
							<view class="flex justify-start margin-top-xs">
								<view class="text-bold text-black">{{ scriptInfo.name }}</view>
							</view>
							<view class="margin-top-sm">
								<view
									v-for="(item1, index1) in scriptInfo.smallClasses"
									:key="index1"
									v-if="index1 < 6"
									class="cu-tag sm round"
									style="background-color: #3f3f3f;color: #b2b1b6;"
								>
									{{ item1.small_name }}
								</view>
							</view>
							<view class="margin-top-sm flex justify-start" style="color: #68676a;">
								<view class="flex justify-start align-center">
									<text class="cuIcon-friendfill text-yellow"></text>
									<view class="text-sm margin-left-xs">{{ scriptInfo.sex_type }}</view>
								</view>
								<view class="flex justify-start align-center margin-left-sm">
									<text class="cuIcon-timefill text-yellow"></text>
									<view class="text-sm margin-left-xs">{{ scriptInfo.hour }}小时</view>
								</view>
								<view class="flex justify-start align-center margin-left-sm">
									<text class="cuIcon-selectionfill text-yellow"></text>
									<view class="text-sm margin-left-xs">{{ scriptInfo.difficulty }}</view>
								</view>
							</view>
							<view class="flex justify-between  margin-top-xs">
								<view class="flex align-end text-yellow">
									<view class="text-sm ">推荐价¥</view>
									<view class="text-lg text-bold">{{ scriptInfo.price }}</view>
									<view class="text-sm ">/位</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="cu-list menu sm-border margin-top">
			<view class="cu-item" @click="showModal" data-target="Modal">
				<view class="content">
					<text class="cuIcon-emojiflashfill text-pink"></text>
					<text class="text-grey">已有人数</text>
				</view>
				<view class="action">
					<view class="cu-avatar-group">
						<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
							<!-- <view class="cu-tag badge cuIcon-female bg-pink" ></view> -->
						</view>
						<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);">
							<!-- <view class="cu-tag badge cuIcon-male bg-blue" ></view> -->
						</view>
					</view>
					<text class="text-grey text-sm">{{sex1}}男{{sex0}}女</text>
				</view>
			</view>
		</view>
		
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">预约日期</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="DateChange">
					<view class="picker">{{ date }}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">预约时间</view>
				<picker mode="time" :value="time" :start="startTime" @change="TimeChange">
					<view class="picker">{{ time }}</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">备注</view>
				<input placeholder="备注(选填)" v-model="remark" name="input" />
			</view>

			<button class="cu-btn block bg-black margin-tb lg margin-lr-sm" @click="CreateFleet">发起拼车</button>
		</form>
		<view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">选择人数</view>
					<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
				</view>
				
				<van-cell title="男" title-width="340rpx">
				  <view slot="right-icon">
					  <van-stepper :value="sex1" min="0" :max="scriptInfo.number" integer @change="sex1=$event.detail" />
				  </view>
				</van-cell>
				<van-cell title="女" title-width="340rpx">
				  <view slot="right-icon">
					  <van-stepper :value="sex0" min="0" :max="scriptInfo.number" integer @change="sex0=$event.detail" />
				  </view>
				</van-cell>
				<button class="cu-btn block bg-black margin-tb lg margin-lr-sm" @click="modalName=null">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			time: '请选择时间',
			date: '请选择日期',
			week:'',
			remark:'',
			sex1:0, //男
			sex0:0, //女
			modalName: null,

			startTime:'',

			scriptInfo: ''
		};
	},
	watch:{
		sex1:function(newVal,oldVal){
			if((newVal+this.sex0)>=this.scriptInfo.number){
				this.sex0=this.scriptInfo.number-newVal
			}
		},
		sex0:function(newVal,oldVal){
			if((newVal+this.sex1)>=this.scriptInfo.number){
				this.sex1=this.scriptInfo.number-newVal
			}
		},
		date:function(newVal,oldVal){
			if(this.$compareDate(newVal,this.startDate)){
				this.startTime=''
			}else{
				this.startTime=(this.dateTimeStr('h')+':'+this.dateTimeStr('i'))
			}
		}
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
	},
	onShow() {
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];
		this.scriptInfo = currPage.$vm.item; //这就是传递的参数
	},
	methods: {
		CreateFleet(){
			if(Boolean(this.scriptInfo)==false){
				this.$textToast('请选择剧本')
				return
			}
			if(this.date==='请选择日期'){
				this.$textToast('请选择日期')
				return
			}
			if(this.time==='请选择时间'){
				this.$textToast('请选择时间')
				return
			}
			if(this.sex1===0&&this.sex0===0){
				this.$textToast('至少选择一人')
				return
			}
			this.$u.adminApi.CreateFleet({
				playId:this.scriptInfo.id,
				storeId:this.vuex_bussinessId,
				date:this.date,
				time:this.time,
				people:this.scriptInfo.number,
				roomId:-1,
				week:this.week,
				remark:this.remark,
				sex1:this.sex1,
				sex0:this.sex0
			}).then(res=>{
				if(res.code===200){
					this.$Toast(res.message,'success',1500,()=>{
						uni.navigateBack()
					})
				}else{
					this.$textToast(res.message)
				}
			})
		},

		TimeChange(e) {
			this.time = e.detail.value;
		},
		DateChange(e) {
			this.date = e.detail.value;
			this.week=this.$getWeekDate(e.detail.value)
			// let myDate = new Date(e.detail.value);
			// let days = myDate.getDay();
			// switch (days) {
			// 	case 1:
			// 		days = '周一';
			// 		break;
			// 	case 2:
			// 		days = '周二';
			// 		break;
			// 	case 3:
			// 		days = '周三';
			// 		break;
			// 	case 4:
			// 		days = '周四';
			// 		break;
			// 	case 5:
			// 		days = '周五';
			// 		break;
			// 	case 6:
			// 		days = '周六';
			// 		break;
			// 	case 0:
			// 		days = '周日';
			// 		break;
			// }
			// this.week=days
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		dateTimeStr(str){
			var date = new Date(),
			year = date.getFullYear(), //年
			month = date.getMonth() + 1, //月
			day = date.getDate(), //日
			hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
			minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), //分
			second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
			hour >= 0 && hour <= 9 ? (hour = hour) : "";
			minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
			second >= 0 && second <= 9 ? (second = "0" + second) : "";
			if(str.indexOf('y') != -1){
				str = str.replace('y', year)
			}
			if(str.indexOf('m') != -1){
				str = str.replace('m', month)
			}
			if(str.indexOf('d') != -1){
				str = str.replace('d', day)
			}
			if(str.indexOf('h') != -1){
				str = str.replace('h', hour)
			}
			if(str.indexOf('i') != -1){
				str = str.replace('i', minute)
			}
			if(str.indexOf('s') != -1){
				str = str.replace('s', second)
			}
			return str;
		},
		showModal(e) {
			if(e.currentTarget.dataset.target=='Modal' && !Boolean(this.scriptInfo)){
				this.$textToast('请先选择剧本')
				return
			}
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.modalName = null;
		}
	}
};
</script>

<style>
.cu-form-group .title {
	min-width: calc(4em + 15px);
}
</style>
